/**
 * @name PostDetail
 * @desc 首页-帖子
 */

import Taro from "@tarojs/taro"
import { View, Text, Image, Input, ScrollView } from "@tarojs/components"
import { ImageGrid } from "@/components"
import { dateFormate, shouldBottom } from "@/utils"

import "./styles.less"

const icoLike = require("@/assets/icons/like.png")
const icoLikeO = require("@/assets/icons/like-o.png")
const icoStar = require("@/assets/icons/star.png")
const icoStarO = require("@/assets/icons/star-o.png")
const icoPlay = require("@/assets/icons/play.png")

class PostDetail extends Taro.Component {
    config = {
        navigationBarTitleText: "Detail"
    }

    state = {
        id: "",
        user: { id: "", name: "", avatar: "" },
        date: 0,
        images: null,
        film: null,
        desc: "",
        likeUsers: [],

        bottomHeight: 0
    }

    componentDidMount() {
        console.log("post id:", this.$router.params)
        this.getBottomHeight()
        this.setState({
            id: "78978564564",
            user: {
                id: "414141745",
                name: "Alex",
                avatar: "http://life.southmoney.com/tuwen/UploadFiles_6871/201808/20180824152413186.jpg"
            },
            date: 1550999591047,
            images: [
                { id: "o90o30o2d9", path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-732688.jpg" },
                { id: "9i898i87y6", path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-731780.jpg" },
                {
                    id: "484sio9id7",
                    path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-748291.jpg"
                },
                {
                    id: "s4df564sd56f4ew6f41x2c3",
                    path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-590821.jpg"
                },
                {
                    id: "9ii8s8fewr9fwr3",
                    path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-143465.png"
                },
                {
                    id: "asdqwdf",
                    path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-143465.png"
                },
                {
                    id: "sdfcsdfsdf4ew54r",
                    path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-508768.jpg"
                },
                {
                    id: "099fwer3423sdffsfwr23",
                    path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-37115.jpg"
                }
            ],
            film: null,
            desc: "Some cool things.",
            likeUsers: [
                {
                    id: "770o93frtw",
                    name: "Hama",
                    avatar: "http://wsing.bssdl.kugou.com/55865a68b52b4d9d015c78276df350c7.jpg_350x350.jpg"
                },
                {
                    id: "0po09i8u",
                    name: "Doom",
                    avatar: "http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                },
                {
                    id: "9i8u7y66t5",
                    name: "Kaepont JK",
                    avatar: "http://tx.haiqq.com/uploads/allimg/170808/0415151545-6.jpg"
                }
            ]
        })
    }

    getBottomHeight() {
        const query = Taro.createSelectorQuery()
        query
            .select("#bottom-bar")
            .boundingClientRect()
            .exec(res => {
                if (res[0]) {
                    this.setState({ bottomHeight: Math.ceil(res[0].height) })
                }
            })
    }

    onImageClick(index) {
        const current = this.state.images[index].path
        const urls = this.state.images.map(v => v.path)
        Taro.previewImage({ current, urls })
    }

    onLike() {}

    onCollect() {}

    render() {
        const { user, date, images, film, desc, likeUsers, bottomHeight } = this.state

        return (
            <View className="post-detail">
                <View className="post-detail__top">
                    <Image src={user.avatar} className="post-detail__user-avatar" mode="aspectFill" />
                    <View className="post-detail__info">
                        <Text className="post-detail__user-name">{user.name}</Text>
                        <Text className="post-detail__date">{dateFormate(date, "yyy-mmm-ddd hh:mm:ss")}</Text>
                    </View>

                    <Text className="post-detail__folowing-button">Folowing</Text>
                </View>

                <View className="post-detail__desc">
                    <Text className="post-detail__desc-article">{desc}</Text>
                </View>

                {images && (
                    <View className="post-detail__images-container">
                        <ImageGrid images={images} onImageClick={this.onImageClick} />
                    </View>
                )}

                {film && (
                    <View className="post-detail__film-wrapper">
                        <Video
                            className="post-detail__film"
                            src={film.path}
                            controls={true}
                            poster={icoPlay}
                            initialTime="0"
                            id={film.id}
                        />
                    </View>
                )}

                <ScrollView scrollY>
                    <View className="post-detail__like-wrapper">
                        <View className="post-detail__like-button">
                            <Image className="post-detail__like-ico" src={icoStarO} mode="aspectFill" />
                        </View>
                        <View className="post-detail__like-button">
                            <Image className="post-detail__like-ico" src={icoLikeO} mode="aspectFill" />
                        </View>
                        <View className="post-detail__like-users">
                            {likeUsers.map(v => (
                                <Image
                                    key={v.id}
                                    src={v.avatar}
                                    mode="aspectFill"
                                    className="post-detail__like-users-item"
                                />
                            ))}
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                            <Image
                                src="http://images.liqucn.com/img/h1/h965/img201709161714530_info300X300.jpg"
                                mode="aspectFill"
                                className="post-detail__like-users-item"
                            />
                        </View>
                    </View>
                </ScrollView>

                <View className="post-detail__comment-list">
                    {/* <Text className="post-detail__comment-title">Comments</Text> */}

                    <View className="post-detail__comment-item">
                        <Image src={user.avatar} className="post-detail__comment-user-avatar" mode="aspectFill" />
                        <View className="post-detail__comment-wrapper">
                            <View className="post-detail__comment-top">
                                <Text className="post-detail__comment-user-name">Shatiyer</Text>
                                <Text className="post-detail__comment-date">2019-01-12</Text>
                            </View>

                            <View className="post-detail__comment-article">Beautiful as sunshine.</View>
                        </View>
                    </View>
                    <View className="post-detail__comment-item">
                        <Image src={user.avatar} className="post-detail__comment-user-avatar" mode="aspectFill" />
                        <View className="post-detail__comment-wrapper">
                            <View className="post-detail__comment-top">
                                <Text className="post-detail__comment-user-name">Shatiyer</Text>
                                <Text className="post-detail__comment-date">2019-01-12</Text>
                            </View>

                            <View className="post-detail__comment-article">Beautiful as sunshine.</View>
                        </View>
                    </View>
                </View>

                <View className="post-detail__comment-container">
                    <View style={{ paddingBottom: bottomHeight + "px" }} />

                    <View
                        id="bottom-bar"
                        className="post-detail__comment-bar"
                        style={{ paddingBottom: shouldBottom ? "34px" : 0 }}
                    >
                        <Input
                            className="post-detail__comment-input"
                            cursorSpacing={20}
                            placeholder="add comment"
                            focus={true}
                        />
                        <Text className="post-detail__comment-submit">Send</Text>
                    </View>
                </View>
            </View>
        )
    }
}

export { PostDetail }
